<template>
	<view class="login" :style="{'--color':vuex_config.themeColor1}">
		<view class="l-banner">
			<image class="image" src="http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202105/jhstest/52839679236503.png"
				mode="widthFix"></image>
		</view>
		<view class="username" :class="{useractive:current == 1}">
			<view class="iconfont iconfont-e619 mr-20"></view>
			<u-input class="input" type="text" v-model="oldPass" :clearable='false'
				:placeholder-style="current == 1?'color:#49a3f1':''" placeholder="旧密码,没有旧密码可不填" @focus="focus(1)"
				@blur="blur" />
		</view>
		<view class="username" :class="{useractive:current == 2}">
			<view class="iconfont iconfont-e619 mr-20"></view>
			<u-input class="input" type="password" v-model="firPass" :clearable='false' :password-icon='false'
				:placeholder-style="current == 2?'color:#49a3f1':''" maxlength='16' placeholder="请输入新密码"
				@focus="focus(2)" @blur="blur" />
		</view>
		<view class="username" :class="{useractive:current == 3}">
			<view class="iconfont iconfont-e619 mr-20"></view>
			<u-input class="input" type="password" v-model="twoPass" :clearable='false' :password-icon='false'
				:placeholder-style="current == 3?'color:#49a3f1':''" maxlength='16' placeholder="确认新密码"
				@focus="focus(3)" @blur="blur" />
		</view>
		<view class="swit_tap" @click="toGetPass">忘记密码，点击找回密码</view>
		<view class="login-btn" @click="toSubmit">提交</view>
	</view>
</template>

<script>
	import {
		uniBack
	} from '@/utils/uniPromise.js'
	import {
		isMobile
	} from '@/utils/validate.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	import md5Libs from "@/uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				current: 0,
				loading: false,
				oldPass: '',
				firPass: '',
				twoPass: '',
				timer: true, // 是否可以点击开启定时器
				Count: 60, // 倒计时
			}
		},
		onLoad(options) {

		},
		methods: {
			...mapActions(['loadUserInfo']),
			focus(index) {
				this.current = index
			},
			blur(val) {
				this.current = 0
			},
			toGetPass() {
				this.$linkTo('/package/common/login', 'redirectTo')
			},
			toSubmit() {
				// 新密码可能为空
				if (!this.firPass || !this.twoPass) {
					this.$toast({
						title: '新密码不能为空',
						duration: 800
					})
				} else if (this.firPass != this.twoPass) {
					this.$toast({
						title: '两次输入的新密码不一致',
						duration: 800
					})
				} else if (this.oldPass == this.firPass) {
					this.$toast({
						title: '旧密码和新密码不能相同',
						duration: 800
					})
				} else {
					let oldPass = ''
					if (this.oldPass) {
						oldPass = md5Libs.md5(this.oldPass)
					}
					this.$loading()
					let params = {
						password: oldPass || '',
						newpassword: md5Libs.md5(this.firPass),
						users_id: this.vuex_user.fk_users_id
					}
					this.$resPost('ResetPassword', params).then(() => {
						this.$hide()
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uniBack()
								}, 800);
							}
						})
					})
				}

			},
		}
	}
</script>

<style lang='scss' scoped>
	.login {
		padding: 0 120rpx;

		/* height: 100vh; */
		.l-banner {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 150rpx;
			margin-bottom: 80rpx;

			.image {
				width: 155rpx;
				height: 155rpx;
			}
		}

		.username {
			padding-bottom: 10rpx;
			border-bottom: 1px solid #e5e5e5;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.iconfont {
				margin-right: 20rpx;
			}

			.input {
				font-size: 30rpx;
				flex: 1;
				overflow: hidden;
			}
		}

		.mb-20 {
			margin-bottom: 45rpx;
		}

		.mr-20 {
			margin-right: 20rpx;
		}

		.swit_tap {
			font-size: 26rpx;
			color: var(--color);
			margin-top: 16rpx;
			text-align: right;
		}

		.login-btn {
			margin-top: 110rpx;
			margin-bottom: 30rpx;
			width: 100%;
			background-color: #49a3f1;
			color: #fff;
			text-align: center;
			line-height: 90rpx;
			border-radius: 20rpx;
		}

		.login-read {
			display: flex;
			align-items: center;
			color: #999;
			padding: 0 0 0 30rpx;

			.buy-icon {
				margin-right: 18rpx;
				color: #49a3f1;
				font-size: 34rpx;
			}

			.title {
				color: #49a3f1;
			}
		}

		.useractive {
			color: #49a3f1;
			border-color: #49a3f1;
		}

		.prop-title {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 90rpx;
			border-bottom: 1px solid #e5e5e5;
		}

		.prop-content {
			height: 450rpx;
		}

		.prop-btn {
			border-top: 1px solid #e5e5e5;
			color: #49a3f1;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 80rpx;
		}
	}
</style>
